<template>
<div id="MenDian">
  <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getList">
    <!--  @click="showBlank( item )" -->
    <div class="tongji-box" v-for="(item, index) in list" :key="index" @click="showQushi( item )">
      <div class="tongji-item">
        <div class="tongji-row">
          <div>代理名称：</div>
          <div class="ft-blue" style="font-size: 0.32rem;">{{ item.nick }}</div>
        </div>
        <div class="tongji-row">
          <div>代理等级：</div>
          <div>{{ roleType[ item.roleType ] }}</div>
        </div>
        <div class="tongji-row">
          <div>总金额：</div>
          <div class="ft-org">{{ item.totalFee }}元</div>
        </div>
        <div class="tongji-row">
          <div>分成金额：</div>
          <div class="ft-org">{{ item.proportionMoney || '0' }}元</div>
        </div>
      </div>
    </div>
  </van-list>
  
  <van-popup v-model="blank.show" position="bottom" :style="{ height: '100%' }">
    <div class="page-blank">
      <van-nav-bar title="代理统计" left-arrow @click-left="blank.show = false"/>
      <van-search v-model="blank.sear" :placeholder="`请输入代理名称`" show-action shape="round">        
        <div slot="action" class="ft-blue">搜索</div>
      </van-search>
      <div class="flex-body">
        <van-list v-model="blank.loading" :finished="blank.finished" finished-text="没有更多了" @load="getBlankList">
          <div class="tongji-box" v-for="(item, index) in blank.list" :key="index">
            <div class="tongji-item">
              <div class="tongji-row">
                <div>代理名称：</div>
                <div class="ft-blue" style="font-size: 0.32rem;">{{ item.nick }}</div>
              </div>
              <div class="tongji-row">
                <div>代理等级：</div>
                <div>{{ roleType[ item.roleType ] }}</div>
              </div>
              <div class="tongji-row">
                <div>总金额：</div>
                <div class="ft-org">{{ item.totalFee }}元</div>
              </div>
              <div class="tongji-row">
                <div>分成金额：</div>
                <div class="ft-org">{{ item.proportionMoney || '0' }}元</div>
              </div>
            </div>
          </div>
        </van-list>
      </div>
    </div>
  </van-popup>

  <van-popup v-model="qushi.show" position="bottom" :style="{ height: '100%' }">
    <qu-shi :userId="qushi.userId" :close="() => qushi.show = false" v-if="qushi.show"></qu-shi>
  </van-popup>

</div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import axios from '@/utils/request';
import QuShi from '@/view/Statistics/QuShi.vue';

@Component({ components: { QuShi } })
export default class MenDian extends Vue {

  list: any = []
  roleType: any = [ '', '代理', '业务员', '商户' ]

  loading: boolean = false
  finished: boolean = false
  page: any = 1
  searchValue: any = ''

  search(value: string) {
    this.searchValue = value;
    this.page = 1
    this.list = [];
    this.finished = false;
    this.getList();
  }
  getList() {
    this.loading = true;
    let page = this.page, size = 10, vague = 2, userId = this.$store.state.userInfo.userId, fuzzy = this.searchValue; 
    axios.get('/api/chargerPlaEquipmentController/getLeaseStatistics', { 
      page, size, vague, userId, fuzzy
    }).then((res: any) => {
      let json = res || {};
      if(json.isLastPage) this.finished = true;
      this.loading = false;
      let arr = json.list || [];
      this.page = this.page + 1;
      this.list = [ ...this.list, ...arr ];
    }).catch((err: any) => {
      this.loading = false;
      this.finished = true;
    });
  }

  blank: any = {
    show: false,
    sear: '',
    searKey: '',
    page: 1,
    userId: 0,
    loading: false,
    finished: false,
    list: []
  }
  showBlank(item: any) {
    this.blank.userId = item.userId;
    this.blank.sear = '';
    this.blank.searKey = '';
    this.blank.page = 1;
    this.blank.finished = false;
    this.blank.list = [];
    this.blank.show = true;    
    this.getBlankList();
  }
  searBlank() {
    this.blank.searKey = this.blank.sear;
    this.blank.page = 1;
    this.blank.finished = false;
    this.blank.list = [];
    this.getBlankList();
  } 
  getBlankList() {
    this.blank.loading = true;
    let page = this.blank.page, size = 10, vague = 3, userId = this.blank.userId;
    let query: any = { page, size, vague, userId };
    if(this.blank.searKey) query.fuzzy = this.blank.searKey;
    axios.get('/api/chargerPlaEquipmentController/getLeaseStatistics', query).then((res: any) => {
      let json = res || {};
      if(json.isLastPage) this.blank.finished = true;
      this.blank.loading = false;
      let arr = json.list || [];
      this.blank.page = this.blank.page + 1;
      this.blank.list = [ ...this.blank.list, ...arr ];
    }).catch((err: any) => {
      this.blank.loading = false;
      this.blank.finished = true;
    });
  }

  showQushi(info: any) {
    this.qushi.userId = info.userId;
    this.qushi.show = true;
  }
  qushi: any = {
    show: false,
    userId: false
  }

  mounted() {
    this.getList();
  }
  
};
</script>

